<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>
            {{title}}
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>
    <div class="contain">
      <div class="title">{{title}}</div>
      <div class="box">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="成员账号:" prop="userName">
            <el-input v-model="ruleForm.userName"></el-input>
          </el-form-item>
          <el-form-item label="成员姓名:" prop="userTruename">
            <el-input v-model="ruleForm.userTruename"></el-input>
          </el-form-item>

          <el-form-item label="所属部门:" prop="orgId">
            <el-select
              v-model="ruleForm.orgId"
              placeholder="请选择所属部门"
              style="width:350px;margin-left:0;"
            >
              <el-option
                :label="item.orgName"
                :value="item.orgId"
                v-for="(item,index) in orgs"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属角色:" prop="roleIds">
            <el-select
              v-model="ruleForm.roleIds"
              placeholder="请选择所属角色"
              style="width:350px;margin-left:0;"
            >
              <el-option
                v-for="(item,index) in roles"
                :label="item.roleName"
                :value="item.roleId"
                :key="index"
              ></el-option>
            </el-select>
            <!-- <el-checkbox-group v-model="ruleForm.roleIds" style="text-align:left;">
              <el-checkbox
                v-for="(item,index) in roles"
                :key="index"
                :label="item.roleId"
                name="type"
              >{{item.roleName}}</el-checkbox>
            </el-checkbox-group> -->
          </el-form-item>
          <el-form-item label="新密码:" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码:" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否启用:" prop="userStatus" style="text-align:left;">
            <el-switch
              v-model="ruleForm.userStatus"
              active-color="#1abc9a"
              inactive-color="#e4e4e4"
            ></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确认提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "addMember",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      title: "",
      ruleForm: {
        orgName: "",
        userStatus: true,
        userName: "",
        roleIds: "",
        userId: "",
        pass: "",
        checkPass: "",
        userTruename: "",
        mdsCheckPass:'',
        id:'',
      },
      rules: {
        userName: [
          { required: true, message: "请输入成员账号", trigger: "blur" },
          { min: 1, max: 16, message: "长度在 1 到 16 个字符", trigger: "blur" }
        ],
        userTruename: [
          { required: true, message: "请输入成员姓名", trigger: "blur" },
          { min: 1, max: 8, message: "长度在 1 到 8 个字符", trigger: "blur" }
        ],
        pass: [{ required: true, validator: validatePass, trigger: "blur" }],
        checkPass: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ],
        orgId: [
          { required: true, message: "请选择所属部门", trigger: "change" }
        ],
        roleIds: [
          {
            required: true,
            message: "请选择所属角色",
            trigger: "change"
          }
        ]
      },
      roles: [],
      orgs: []
    };
  },
  created() {
    this.initSelect();
    // 如果跳转过来有参数，就是编辑且参数回填，如果没有则是添加
    if (this.$route.params.editInfo != null) {
      this.rules.pass[0]=[];
      this.rules.checkPass[0]=[];
      this.title = "编辑成员";
      let info = this.$route.params.editInfo;
      info.roleIds = info.roleNames;
      console.log(info.roleList)
      this.ruleForm = this.deepClone(info);
      this.ruleForm.id = info.roleList[0].roleId;
      console.log(this.ruleForm)
    } else {
      this.title = "添加成员";
    }
  },
  mounted() {},
  methods: {
    // 像后台发送请求获取角色列表和部门列表，动态渲染出checkbox-group和select-options
    initSelect() {
      let that = this,
        suCb = res => {
          this.roles = res.data.roleList;
          this.orgs = res.data.orgList;
        };
      let erCb = res => {
        console.log(res);
      };
      let params = {
        url: "/api/web/sysUser/toUpdateOrInsertUser",
        methods: "post",
        data: "",
        success: suCb,
        error: erCb
      };
      that.$https(params);
    },

    // 提交表单信息
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let that = this,
            suCb = res => {
              console.log(res);
              if(res.data.flag == 1){
                that.$msg('提交成功！');
              }
              that.$router.push({name:'member'})
            },
            parmas = {
              url: "/api/web/sysUser/updateOrInsertUser",
              methods: "post",
              data: {
                currentUserId:localStorage.getItem('ms_userId'),
                userId:that.ruleForm.userId,
                orgId:that.ruleForm.orgId,
                roleIds:that.ruleForm.id||that.ruleForm.roleIds,
                userName:that.ruleForm.userName,
                userStatus:that.ruleForm.userStatus,
                userTruename:that.ruleForm.userTruename,
                userPwd:"",
              },
              success: suCb
            };
            if(that.$route.params.editInfo != null && (that.ruleForm.pass==""||that.ruleForm.pass==undefined)){
              parmas.data.userPwd = ""
            }else{
              let pwd = that.deepClone(that.ruleForm);
              parmas.data.userPwd = that.$md5(pwd.pass);
            }
            console.log(parmas.data)
          this.$https(parmas);
        } else {
          console.log("error");
          return false;
        }
      });
    },
    // 重置表单信息
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
  //  activated() {
  //    console.log(this.$route.params)
  //  }
};
</script>
<style scoped>
.contain {
  width: 1100px;
  border: 1px solid #e4e4e4;
  margin: 40px auto;
  box-sizing: border-box;
}
.contain .title {
  height: 50px;
  background: #f3f3f3;
  line-height: 50px;
  text-align: left;
  border-bottom: 1px solid #e4e4e4;
  font-size: 14px;
  color: #666;
  padding-left: 20px;
}
.box {
  width: 500px;
  margin: 40px auto;
}

.box .el-button--primary {
  color: #fff;
  background-color: #1abc9c;
  border-color: #1abc9c;
}

.box .el-form-item {
  width: 450px;
}

.box .el-select {
  margin-left: -132px;
}
</style>






